﻿<template>
  <div class="app-container">
    <div class="chart-title">
      <div>档案管理</div>
      <div>
        <el-button @click="comeBack">返回</el-button>
      </div>
    </div>
    <div class="chart-content">
      <!-- <div v-for="(items,index)in chartData"
           :key="index"> {{ items }}</div> -->
      <div
        v-for="(items, index) in chartData"
        :key="index"
      >
        <div>订单{{ parseInt(index)+1 }}&nbsp; {{ items.supplier_name }}</div>
        <div
          v-for="(items_2, index_2) in items.addr_list"
          :key="index_2"
        >
          <div class="warehouse-info">
            <div>
              仓库： {{ items_2.depot_name }}
            </div>
            <div>
              收货地址： {{ items_2.address }}
            </div>
            <div>
              收货人： {{ items_2.linkman }}
            </div>
            <div>
              联系电话： {{ items_2.linkman_mobile }}
            </div>
          </div>
          <div
            v-for="(items_3, index_3) in items.addr_list"
            :key="index_3"
          >
            <el-table
              :data="items_3.goods_list"
              border
              style="width: 100%"
            >
              <el-table-column
                label="商品编号"
                align="center"
              >
                <template slot-scope="scope">
                  {{ scope.row.goods_code }}
                </template>
              </el-table-column>
              <el-table-column
                label="商品名称"
                align="center"
              >
                <template slot-scope="scope">
                  {{ scope.row.goods_name }}
                </template>
              </el-table-column>
              <el-table-column
                label="类别"
                align="center"
              >
                <template slot-scope="scope">
                  {{ scope.row.category_name }}
                </template>
              </el-table-column>
              <el-table-column
                label="品牌"
                align="center"
              >
                <template slot-scope="scope">
                  {{ scope.row.brand_name }}
                </template>
              </el-table-column>
              <el-table-column
                label="规格"
                align="center"
              >
                <template slot-scope="scope">
                  {{ scope.row.attribute }}
                </template>
              </el-table-column>
              <el-table-column
                label="单位"
                align="center"
              >
                <template slot-scope="scope">
                  {{ scope.row.units_name }}
                </template>
              </el-table-column>
              <el-table-column
                label="数量"
                align="center"
              >
                <template slot-scope="scope">
                  <el-input-number
                    v-model="scope.row.number"
                    :min="1"
                  ></el-input-number>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                align="center"
              >
                <template slot-scope="scope">
                  <div
                    class="read-img"
                    @click="handleModifyStatus(index,index_2,scope.$index)"
                  >
                    <img src="@/assets/images/delete@2x.png" />
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="action-bar">
            <div>备注信息: <el-input
                v-model="items_2.remark"
                style="width: 160px; height:32px;"
                class="filter-item"
                :placeholder="$t('public.remark')"
              ></el-input>
            </div>
            <div class="action-right">
              <div>
                <el-button @click="handleEdit(index,index_2)">编辑</el-button>
              </div>
              <div>
                <el-button @click="handleCreate(index,index_2)">新增商品</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <el-button @click="submitData">提交</el-button>
      </div>
      <el-dialog
        :title="textMap[dialogStatus]"
        :visible.sync="dialogVisible"
      >
        <el-form
          ref="dataForm"
          :rules="rules"
          :model="temp"
          label-position="right"
          label-width="30%"
          style="width: 400px margin-left:120px"
          size="small"
        >
          <div class="pops">
            <div class="information-title">
              <span class="icon-title"></span>
              <span>基础信息:</span>
            </div>
            <div class="pops-normal">
              <el-form-item
                :label="$t('goods.name') + ' :'"
                prop="goods_id"
              >
                <drop-down-select
                  :data="goodsOptions"
                  :count="goodsCount"
                  :page-size="pageSize"
                  :disabled="dialogStatus !== 'create' ? true : false"
                  :id="temp.goods_id"
                  :name="temp.goods_name"
                  @getList="(pageNumber, search)=>{return getGoods(pageNumber, search,'getGoods')}"
                  @addList="(pageNumber, search)=>{return getGoods(pageNumber, search,'addGoods')}"
                  @choose="(data)=>{return choose(data, 'goods')}"
                  @remove="(data)=>{return remove(data, 'goods')}"
                ></drop-down-select>
              </el-form-item>
              <el-form-item
                :label="$t('public.number') + ' :'"
                prop="amount"
              >
                <el-input-number
                  size="small"
                  v-model="temp.amount"
                ></el-input-number>
              </el-form-item>
            </div>
          </div>
        </el-form>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="createData"
          >确 定</el-button>
        </span>
      </el-dialog>
      <!-- 编辑提货单 -->
      <el-dialog
        :title="textMap[dialogStatus]"
        :visible.sync="dialogChartFormVisible"
      >
        <el-form
          ref="dataForm"
          :rules="rules"
          :model="temp"
          label-position="right"
          label-width="30%"
          style="width: 400px margin-left:120px"
          size="small"
        >
          <div class="pops">
            <div class="information-title">
              <span class="icon-title"></span>
              <span>基础信息:</span>
            </div>
            <div class="pops-normal">
              <el-form-item
                :label="$t('goods.address') + ' :'"
                prop="address"
              >
                <el-input v-model="program.address"></el-input>
              </el-form-item>
              <el-form-item
                :label="$t('goods.linkman') + ' :'"
                prop="linkman"
              >
                <el-input v-model="program.linkman"></el-input>
              </el-form-item>
              <el-form-item
                :label="$t('goods.linkmanMobile') + ' :'"
                prop="linkman_mobile"
              >
                <el-input v-model="program.linkman_mobile"></el-input>
              </el-form-item>
            </div>
          </div>
        </el-form>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="editData"
          >确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script type="text/javascript">
import dropDownSelect from "@/views/select/dropDownSelect"; // 分页选择控件
export default {
  name: "PurchaseRequisition",
  components: {
    "drop-down-select": dropDownSelect
  },
  data() {
    return {
      chartData: undefined,
      dialogVisible: false,
      dialogChartFormVisible: false,
      dialogStatus: "",
      textMap: {
        edit: "编辑",
        create: "添加",
        review: "审核",
        read: "查看"
      },
      rules: {
        name: [{ required: true, message: "请选择商品", trigger: "change" }]
      },
      index: undefined,
      index_2: undefined,
      temp: {
        goods_id: undefined,
        goods_name: undefined,
        code: "",
        category_name_2: "",
        brand_name: "",
        attribute: "",
        units_name: "",
        amount: ""
      },
      program: {
        linkman: "",
        linkman_mobile: "",
        address: ""
      },
      goodsOptions: [],
      goodsCount: undefined,
      pageSize: 20
    };
  },
  created() {
    if (this.$route.query.ids) {
      this.ids = this.$route.query.ids
      this.getList();
    } else {
      this.chartData = [{ addr_list: [{ addr_list: [{}] }] }];
    }
  },
  methods: {
    getList() {
      this.listLoading = true;
      const data = {
        ids: this.ids ? this.ids : ""
      };
      const path = {
        app: "goods",
        api: "api_goods_index_createPurchaseRequest",
        version: "1.0",
        data: data
      }
      console.log('JSON.stringify(path)', JSON.stringify(path))
      this.socketApi.sendSock(JSON.stringify(path), res => {
        if (res) {
          console.log('res', res)
          this.socketData(res);
        }
      });
    },
    comeBack() {
      this.$router.push('/inventory-data/out-of-stock-list')
    },
    handleCreate(index, index_2) {
      this.index = index;
      this.index_2 = index_2;
      console.log('新增商品', index, index_2);
      this.dialogStatus = "create";
      this.resetTemp();
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },
    handleEdit(index, index_2) {
      console.log('编辑缺货单', index);
      this.index = index;
      this.index_2 = index_2;
      const program = JSON.parse(JSON.stringify(this.chartData[index].addr_list[index_2]));
      this.program.linkman = program.linkman;
      this.program.linkman_mobile = program.linkman_mobile;
      this.program.address = program.address;
      console.log('this.program', this.program)
      this.dialogStatus = "edit";
      this.dialogChartFormVisible = true;
    },
    createData() {
      console.log('this.temp', this.temp)
      const data = {
        goods_id: this.temp.goods_id ? this.temp.goods_id : "",
        goods_code: this.temp.code ? this.temp.code : "",
        goods_name: this.temp.goods_name ? this.temp.goods_name : "",
        category_name: this.temp.category_name_2 ? this.temp.category_name_2 : "",
        brand_name: this.temp.brand_name ? this.temp.brand_name : "",
        attribute: this.temp.attribute ? this.temp.attribute : "",
        units_name: this.temp.units_name ? this.temp.units_name : "",
        number: this.temp.amount ? this.temp.amount : 0
      }
      this.chartData[this.index].addr_list[this.index_2].goods_list.push(data)
      this.dialogVisible = false
    },
    editData() {
      this.chartData[this.index].addr_list[this.index_2].linkman = this.program.linkman;
      this.chartData[this.index].addr_list[this.index_2].linkman_mobile = this.program.linkman_mobile
      this.chartData[this.index].addr_list[this.index_2].address = this.program.address
      console.log('this.program', this.program)
      this.dialogChartFormVisible = false;
    },
    handleModifyStatus(index, index_2, index_3) {
      // 订单
      const order = this.chartData
      console.log('订单', order.length)
      // 仓库
      const warehouseList = this.chartData[index].addr_list
      console.log('仓库', warehouseList.length)
      // 商品
      const goodList = this.chartData[index].addr_list[index_2].goods_list
      console.log('商品', goodList.length)

      if (goodList.length > 1) {
        console.log('删一个')
        this.chartData[index].addr_list[index_2].goods_list.splice(index_3, 1)
      } else {
        if (order.length === 1 && warehouseList.length === 1) {
          this.$message.error("至少保留一个产品");
        } else {
          if (warehouseList.length === 1) {
            console.log('删订单')
            this.chartData.splice(index, 1)
          } else {
            console.log('删库')
            this.chartData[index].addr_list.splice(index_2, 1)
          }
        }
      }
      console.log('index, index_2, index_3', index, index_2, index_3)
    },
    submitData() {
      const path = {
        app: "goods",
        api: "api_goods_index_purchaseRequest",
        version: "1.0",
        data: this.chartData
      }
      console.log('JSON.stringify(path)', JSON.stringify(path))
      this.socketApi.sendSock(JSON.stringify(path), res => {
        if (res) {
          console.log('res', res)
          this.socketData(res);
        }
      });
    },
    // 商品选择
    getGoods(pageNumber, search, name) {
      const path = {
        app: "common",
        api: "api_goods_index_getList",
        version: "1.0",
        data: {
          rows: this.pageSize,
          page: pageNumber || 1,
          name: search || "",
          returnType: name || ""
        }
      };
      this.socketApi.sendSock(JSON.stringify(path), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },

    choose(data, name) {
      if (name === 'goods') {
        this.temp.goods_id = data.id;
        this.temp.goods_name = data.name;
        this.goodsOptions.forEach(element => {
          if (element.id === this.temp.goods_id) {
            this.temp.code = element.code;
            this.temp.category_name_2 = element.category_name_2;
            this.temp.brand_name = element.brand_name;
            this.temp.attribute = element.attribute;
            this.temp.units_name = element.units_name;
          }
        })
      }
    },
    remove(data, name) {
      if (name === 'goods') {
        this.temp.goods_id = undefined;
        this.temp.goods_name = "";
        this.temp.code = "";
        this.temp.category_name_2 = "";
        this.temp.brand_name = "";
        this.temp.attribute = "";
        this.temp.units_name = "";
      }
    },
    resetTemp() {
      this.temp = {
        id: undefined,
        goods_id: "",
        goods_name: "",
        code: "",
        category_name_2: "",
        brand_name: "",
        attribute: "",
        units_name: "",
        amount: 1
      };
    },
    socketData(res) {
      if (res !== '{"type":"ping"}') {
        const resj = JSON.parse(res);
        if (resj.code === -1) {
          this.$message.error(resj.message);
        } else {
          if (resj.api === "api_goods_index_createPurchaseRequest") {
            resj.data.forEach(element => {
              element.addr_list.forEach(res => {
                res.remark = "";
              })
            })
            this.chartData = resj.data;
            console.log('this.chartData', this.chartData)
          } else if (resj.api === "api_goods_index_getList" && resj.type === "getGoods") {
            this.goodsOptions = resj.data
            this.goodsCount = resj.count
          } else if (resj.api === "api_goods_index_getList" && resj.type === "addGoods") {
            this.goodsOptions = this.goodsOptions.concat(resj.data)
          } else if (resj.api === "api_goods_index_purchaseRequest") {
            console.log('提交成功')
            this.comeBack()
          }
        }
      }
    }
  }
};
</script>
<style scoped>
.warehouse-info {
  display: flex;
  padding: 14px;
}
.action-bar {
  display: flex;
  justify-content: space-between;
  padding: 14px;
}
.warehouse-info div {
  flex: 1;
}
.action-right {
  display: flex;
}
.action-right div:not(:first-child) {
  margin-left: 14px;
}
</style>
